<!DOCTYPE html>
<html>
  <head>
    <title>Testo tabella</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="WebTestProject/lib/jQuery/js/jquery-1.7.1.min.js"> </script>
    <script type="text/javascript" src="WebTestProject/script/controls.js"> </script>
    <script type="text/javascript" src="WebTestProject/script/node.js"> </script>
    <script type="text/javascript" src="WebTestProject/script/diagram.js"> </script>
    <script type="text/javascript" src="WebTestProject/script/CollapseButton.js"> </script>
    <script type="text/javascript" src="WebTestProject/script/DetailButton.js"> </script>
    <script type="text/javascript" src="WebTestProject/script/ReportButton.js"> </script>

    <script type="text/javascript">
      //Initial code to execute on page load
      var LINE_HEIGHT = 30.0;

      $(window).load(function(){
        init();
      });

      function init() {
        var cnvs = document.getElementById("canvas");     //$("#canvas");      TODO: why doesn't this work?!?!?!?!?!?!?!?!?!?!
        var ctx = cnvs.getContext("2d");

        doDraw(ctx, 0.0);
        drawCollapsedButton(ctx, 0.0, 0.0);
        drawReportButton(ctx, 250.0, 300.0);
      }


      function doZoom() {
        var zoomFactor = document.getElementById('zoomText').value;

        var cnvs = document.getElementById('canvas');
        var ctx = cnvs.getContext("2d");
        ctx.scale(zoomFactor, zoomFactor);
        doDraw(ctx, 0.0);
        drawCollapsedButton(ctx, 0.0, 0.0);
        drawReportButton(ctx, 250.0, 300.0);
        document.getElementById('label').innerHTML = "zoomed to " + zoomFactor;
      }


      function doDiagTranslate() {
        var trans = document.getElementById('transText').value;
        var offset = parseFloat(trans);

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        doDraw(ctx, offset);
        drawCollapsedButton(ctx, offset, offset);
        drawReportButton(ctx, 250.0+offset, 300.0+offset);
        
        document.getElementById('label').innerHTML = "translated +" + trans;
      }
      
      function drawBoundingRect() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0.0, 0.0, canvas.width, canvas.height);
        drawDetailReportButton(ctx);
        drawReportButton(ctx, 250.0, 300.0);
      }
      
      
      function debugGrid() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        ctx.save();

        ctx.strokeStyle = 'rgb(0,0,255)';
        ctx.lineWidth = 1;
        
        var w = canvas.width;
        var h = canvas.height;

        for (var x=0; x<w; x+=10) {
          ctx.beginPath();
          ctx.moveTo(x, 0);
          ctx.lineTo(x, h);
          ctx.stroke();
        }
        
        for (var y=0; y<h; y+=10) {
          ctx.beginPath();
          ctx.moveTo(0, y);
          ctx.lineTo(w, y);
          ctx.stroke();
        }

        ctx.restore();

        document.getElementById('label').innerHTML = "DEBUG lines drawn...";
      }
    </script>
    
    
    <script type="text/javascript" src="WebTestProject/script/Control.js"> </script>
    
  </head>
  <body>
    <canvas id="canvas" width="800" height="620" style="background-color: #ffdfdf;"></canvas>
    <br />
    <form action="#" method="post">
      <input type="text" id="zoomText" value="1.1"/>&nbsp;&nbsp;<input type="button" value="go" onclick="javascript: doZoom();"/>
      <br />
      <span id="label">x</span>
      <br />
      <br />
      <br />
      <input type="text" id="transText" value="50"/>&nbsp;&nbsp;<input type="button" value="go" onclick="javascript: doDiagTranslate();"/>
      <br />
      <br />
      <br />
      <input type="button" value="bounding rectangle" onclick="javascript: drawBoundingRect();"/>
      <br />
      <br />
      <input type="button" value="debug grid" onclick="javascript: debugGrid();"/>
    </form>
  </body>
</html>
